<template>
    <ul class="nav-user">
        <li>
            <el-button>写文章</el-button>
        </li>
        <template v-if="!isLogin">
            <li>
                <RouterLink to="/sign-in">
                    <el-button>登录</el-button>
                </RouterLink>
            </li>
            <li>
                <RouterLink to="/sign-up">
                    <el-button type="primary">注册</el-button>
                </RouterLink>
            </li>
        </template>
        <template v-else>
            <li>
                <userNotification></userNotification>
            </li>
            <li>
                <userHead :myInfo="myInfo"></userHead>
            </li>
        </template>
    </ul>
</template>

<script lang="ts" setup>
import userNotification from './user-notification.vue'
import userHead from './user-head.vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { isLogin, myInfo } = storeToRefs(userStore)
</script>
<style lang="less" scoped>
.nav-user {
    margin-left: auto;
    .flex-align-center;
    > li {
        margin: 0 12px;
        height: 100%;
        .flex-align-center;

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
